<template>
	<div class="content">
		<div class="top_filter">
      <div class="top_filter_col">
        <div class="block">
          <span class="top_filter_col_tit ">收付日期</span>
          <el-date-picker
            v-model="searchFrom.transactionDate1"
            type="datetimerange"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </div>
      </div>
			<div class="top_filter_col">
				<span class="top_filter_col_tit">会计项目</span>
          <el-cascader v-model="searchFrom.ofReason" :options="reason_1List" :props="{ emitPath:false,expandTrigger: 'hover',label:'rname',value:'rid',children:'paramst'}"
                       :show-all-levels="false">
            <span value="">
                不限
              </span>
            <template slot-scope="{ node, data }"  v-if="data.rtype=='收入'">

              <span >{{ data.rname }}</span>
            </template>
          </el-cascader>
			</div>
      <div class="top_filter_col">
        <span class="top_filter_col_tit ">对象</span>
        <el-select v-model="searchFrom.object" placeholder="请选择对象" >
          <el-option value="" label="不限"/>
          <el-option v-for="itme in ObjList"   :value="String(itme.objId)" :label="itme.objName" :key="String(itme.objId)" />
        </el-select>
      </div>
			<div class="top_filter_col">
				<span class="top_filter_col_tit">
					<el-button class="el-icon-search" size="small" @click="selectZh()" type="success">搜索</el-button>
					<el-button class="el-icon-search" size="small" type="primary" @click="handleExport">导出Excel</el-button>
				</span>
			</div>

		</div>
		<el-table stripe :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border >
			<el-table-column align="center" prop="dtype" label="类型">
				<template slot-scope="scope">
					<span class="btn" style="background: #67C23A;" v-if="scope.row.dtype=='收入'">收入</span>
					<span class="btn" style="background: #409EFF;" v-else>支出</span>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="ofReason" label="原因">
        <template slot-scope="scope">
          <span v-for="itme in reasonList" v-if="scope.row.ofReason==itme.rid">{{itme.rname}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="createtime" label="日期">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.transactionDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
			<el-table-column align="center" prop="comment" label="附注说明"></el-table-column>


			<el-table-column align="center" prop="debtorMoney" label="借方金额"></el-table-column>
			<el-table-column align="center" prop="creditorMoney" label="贷方金额"></el-table-column>
      <el-table-column label="对象" align="center" prop="object">
        <template slot-scope="scope" >
          <span v-for="itme in ObjList" v-if="scope.row.object==String(itme.objId)">{{itme.objName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签" prop="tag">
        <template slot-scope="scope">
          <span v-for="itme in labelList">
            <span v-for="itme1 in scope.row.tag" v-if="itme1==itme.labelId"><el-tag type="info">{{itme.labelName}}</el-tag> </span>
          </span>
        </template>
      </el-table-column>
			<el-table-column align="center" prop="tax" label="营业税"></el-table-column>
			<el-table-column align="center" prop="invoice" label="发票号码"></el-table-column>
			<el-table-column align="center" label="附件">
        <template slot-scope="scope">
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null"  :href="url+scope.row.attachment">
            <el-button type="primary" size="mini" >查看</el-button>
          </a>
          <a  target="_blank" v-if="scope.row.attachment!=0 && scope.row.attachment!=null">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleDownload(scope.row)"
            >下载</el-button>
          </a>
        </template>
			</el-table-column>

		</el-table>
    <div class="pagination_box">
      <pagination
        v-show="total>0"
        :total="total"
        :page-sizes="[7, 14, 28, 56]"
        :page-size="7"
        :page.sync="searchFrom.pageNum"
        :limit.sync="searchFrom.pageSize"
        @pagination="getData"
      />
    </div>

	</div>


</template>

<script>
  import {listCurrency} from '@/api/system/currency';
  import {listDetail,delDetail,getDetail} from '@/api/system/reasonDetail';
  import {listAccount,income} from '@/api/system/account'
  import {listBalance,addBalance,updateBalance,getBalance} from '@/api/system/balance';
  import {listReason} from '@/api/system/reason';
  import { getInfo } from "@/api/login";
  import { listObj } from "@/api/system/obj";
  import { listLabel } from "@/api/system/label";
	export default {
		data() {
			return {
			  labelList:[],
        ObjList:[],
        queryParams:{},
        url:process.env.VUE_APP_BASE_API,
				dealData: '',
				vouData: '',
				dealOn: 0,
				vouOn: 0,
				tableData: [],
				currentPage: 1,
				pagesize: 10,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        searchFrom: {
					pageNum: 1,
					pageSize: 7,
          object:null
				},
				total: 0,
				accountOptions: [],
				reasonList:[],
				reason_1List:[],
			}
		},
		created() {

      getInfo().then(data=>{
        let label={};
        label.labelCompany=data.tuser.ofCompany;
        listLabel(label).then(rep=>{
          this.labelList=rep.rows;
        })

        let obj={};
        obj.objCompany=data.tuser.ofCompany;
        listObj(obj).then(date=>{
          this.ObjList=date.rows;
          if(this.$route.query.objcet!=null || this.$route.query.objcet!=''){
            this.queryParams.ofCompany=data.tuser.ofCompany;
            this.searchFrom.object=this.$route.query.objcet;
            this.getData()
          }
        })

      })

		},
		methods: {
			getData() {
			  let r={};
			  r.deleted=0;
			  listReason(r).then(date=>{
			    this.reasonList=date.rows;
        })
        r.deleted=0;
			  r.parent=-1;
        listReason(r).then(date=>{
          this.reason_1List=date.rows;
        })
				let that = this
        getInfo().then(data=>{
          this.searchFrom.ofCompany=data.tuser.ofCompany;
          listDetail(this.searchFrom).then(res => {
            if (res.code == 200) {
              that.tableData = res.rows;
              that.total = res.total;
            }
          })
        })
			},
			add() {
				let that = this
				this.$service.account.add(this.addFrom).then(res => {
					if (res.state == 1) {
						that.getData()
					}
					that.ShowDlogForm = false
				})
			},
			stop(scope, row) {
				console.log(scope, row);
				let that = this
				this.$service.account.stop(row.aid).then(res => {
					if (res.state == 1) {
						that.getData()
					}
					that.ShowDlogForm = false
				})
			},
			showEdit(row) {
				this.editData = row
				this.ShowEditForm = true
			},
			edit() {
				let that = this
				this.$service.account.edit(this.editData).then(res => {
					if (res.state == 1) {
						that.getData()
						that.$notify({
							title: '修改成功',
							// message: '修改成功',
							type: 'success'
						});
					}
					that.ShowEditForm = false
				})
			},
			del(id) {
				let that = this
				this.$confirm('确认删除？')
					.then(_ => {
						delDetail({rid:id}).then(res => {
							if (res.code == 200) {
								that.getData()
								that.$notify({
									title: '删除成功',
									// message: '修改成功',
									type: 'success'
								});
							}
						})
						done();
					})
					.catch(_ => {});

			},
			findBalance(aid) {
				let that = this
				that.$service.account.findBalance(aid).then(res => {
					if (res.state == 1) {
						// that.getData()
						that.balanceList = res.data
						this.showBalance = true
					}
				})
			},
			handleSizeChange() {

			},
			handleCurrentChange() {},
      selectZh(){
			  listDetail(this.searchFrom).then(date=>{
			    this.tableData=date.rows;
			    this.total=date.total;
        })
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('/system/reasonDetail/export', {
          ...this.queryParams
        }, `会计项目明细数据.xlsx`)
      },
      // 文件下载处理
      handleDownload(row) {
        this.download('/common/download/resource?resource=' + encodeURI(row.attachment), {
          ...this.queryParams
        }, row.attachment)
      }
		}
	}
</script>

<style lang="scss">
	.pagination_box {
		height: 60px;
		width: 100%;
		background-color: #fff;
	}

	.btn {
		padding: 4px 8px;
		color: white;
		border-radius: 4px;
	}

	.top_filter {
		font-size: 15px;
		padding: 10px 20px;
		background-color: #fff;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-wrap: wrap;

		&_col {
			padding: 4px 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-right: 10px;

			&_tit {
				white-space: nowrap;
				margin: 8px;
			}
		}
	}
</style>
